<script setup>
import {
  NInput,
  NIcon,
  NFlex,
  NDescriptions,
  NStatistic,
  NNumberAnimation,
} from 'naive-ui';
import { h, ref, watch, onMounted, reactive } from 'vue';
import {
  ApiGetTime,
  ApiOneDayEnglish,
  apiWeather,
} from '@/common/api/index.js';
import { Search } from '@vicons/ionicons5';

const modules = import.meta.glob('/src/common/icon/*.svg');

// 天气数据
const weatherData = reactive({
  key: '', // 输入框
  city_name: '', // 地区
  forecast_list: [], // 未来16天天气预测
  current_condition: '', // 当前天气
  current_temperature: '', // 当前温度
  current_time: Date.now(), // 当前天气更新时间
  tips: '', // 天气温馨提示
});

const onSearch = async () => {
  let params = {
    city_name: weatherData.key || '长沙',
  };
  let res = await apiWeather(params);
  if (!res.result) return $message.warning('暂无相关城市天气');
  Object.assign(weatherData, {}, res?.result || {});
  weatherData.key = '';
};

onMounted(async () => {
  let res = await apiWeather({ city_name: '长沙' });
  Object.assign(weatherData, {}, res?.result || {});
});
</script>

<template>
  <!--  <div>{{ tqData }}</div>-->
  <n-flex vertical align="center">
    <div class="content">
      <n-input
        placeholder="请输入地区查询天气"
        round
        v-model:value="weatherData.key"
        @keyup.enter="onSearch"
        style="width: 500px"
      >
        <template #suffix>
          <n-icon
            class="cursor-pointer"
            :component="Search"
            @click="onSearch"
          ></n-icon>
        </template>
      </n-input>
      <n-flex vertical style="width: 100%; height: 100%">
        <div class="content-top">
          <n-flex>
            <div class="content-top-left">
              <n-flex>
                <img src="" alt="" />
                <n-flex vertical>
                  <n-statistic label="一个小目标" tabular-nums>
                    <n-number-animation
                      ref="numberAnimationInstRef"
                      show-separator
                      :from="0"
                      :to="31"
                      :active="true"
                    />
                  </n-statistic>
                </n-flex>
              </n-flex>
            </div>
            <div class="content-top-right">
              <p>It's sunny now</p>
              <p>wind 3.0m/s</p>
              <n-descriptions label-placement="top" title="描述">
                <template v-for="item in 5">
                  <n-descriptions-item :label="`${item}1`"
                  >1</n-descriptions-item
                  >
                </template>
              </n-descriptions>
            </div>
          </n-flex>
        </div>
        <div class="content-bottom"></div>
      </n-flex>
    </div>
  </n-flex>
</template>

<style scoped lang="scss">
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  .content-top {
    height: calc(100vh - 50px - 400px);
    background-color: skyblue;
  }
}
</style>
